<div ng-controller="InfoCollection_ListC">
    <div class="bg-light lter b-b wrapper-md">
        <div class="row">
            <h1 class="m-n font-thin h3 col-lg-6 col-md-6 col-sm-6 col-xs-12">钢厂信息日报表</h1>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 text-right">
                <span class="h4">选择日期范围：</span>
                <input type="date" ng-model="begin" ng-change="getData()" />----
                <input type="date" ng-model="end" ng-change="getData()" />
                <button class="btn btn-default" ng-click="$state.go('app.InfoCollection_List')">返回</button>
            </div>
        </div>
    </div>
    <div class="bg-light lter b-b" style="padding: 5px 15px;">
    <div class="row">
        <button class="btn btn-default" ng-click="typeFun(1)">钢厂库存报表</button>
        <button class="btn btn-default" ng-click="typeFun(2)">成交量统计</button>
    </div>
    </div>
    <div id="hot" class="text-center"></div>
</div>
<script src="\htm\js\echarts-all.js"></script>

<script>
    angular.module('app')//非标优惠
            .controller("InfoCollection_ListC", function ($scope, $state, $http) {
                $scope.begin = new Date(new Date().toLocaleDateString());
                $scope.end = new Date();
//                var dataObject = [
//                    {Type: '<div id="main" style="width: 600px;height:400px;">22222222222</div>', SupplierName: null, AgentName: null, Name: null,	Price: null, Stock: null, Volume: null, Remark: null}
//                ];
                var dataObject = [['日期','销量一','销量二'],['2017-1-3','30','90'],['2017-1-3','50','60']];
                var hotElement = document.querySelector('#hot');
                var hotElementContainer = hotElement.parentNode;
                var hotSettings = {
                    data: dataObject,
                    afterRender :function(){
                        if(document.getElementById('main'))
                        {
//                            var myChart = echarts.init(document.getElementById('main'));
//                            myChart.setOption(option);
                            console.log($scope.resdata1);
                            dataToChange('main' , $scope.viewType , $scope.resdata1);
                        }
                    },
                    manualColumnResize:true,
//
                    className:"htMiddle",
                    readOnly:true,
                    stretchH: 'all',
                    //width: '100%',
                    autoWrapRow: true,
                    height: 800,
//        maxRows: 22,
                    minSpareRows:32,
                    rowHeaders: true
                };
                hotSettings.colHeaders = new Array(20);
                hotSettings.columns = new Array(20);

                var hot = new Handsontable(hotElement, hotSettings);

                function dataToChange(id,type,data){
                    var myChart = echarts.init(document.getElementById(id));
                    //series中data
                    var values = [];
                    //data
                    var names = [];
                    //行头
                    var rowHander=[];
                    //列头
                    var colHander=data[0];
                    var option  =  {};
                    //x轴数据
                    var xData = []
                    names = [].concat(data[0]);

                    //删除第一行第一个元
                    names.shift();
                    if(type === 'line'||type === 'bar'){
                        option.series=[ ]
                        for (var i = 0; i < names.length; i++) {
                            var item = names[i];
                            var obj = {}
                            obj.name = names[i]
                            obj.type = type
                            obj.data = []
                            for (var a = 0; a < data.length; a++) {
                                var rowData = data[a];
                                if(i === 0 && a > 0){
                                    xData.push(rowData[0])
                                }
                                if (a > 0) {
                                    obj.data.push(rowData[i+1])
                                }
                            }
                            option.series.push(obj)
                        }
                        option.legend = {
                            data:names
                        }
                        option.tooltip ={
                            trigger: 'axis',
//                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        }
                        option.xAxis={
                            data:xData
                        }
                        option.yAxis={}

                    }else{
                        option.legend = {
                            data:xData
                        }
                        option.tooltip ={
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        }
                        var seriesData = []
                        for (var i = 0; i < data.length; i++) {
                            var item = data[i];
                            if (i>0) {
                                var obj = {}
                                obj.value=item[1]
                                obj.name=item[0]
                                seriesData.push(obj)
                            }
                        }
                        option.series=[
                            {
                                type:type,
                                radius : '55%',
                                center: ['50%', '60%'],
                                data:seriesData
                            }
                        ]
                    }
                    myChart.setOption(option);
                }
                $scope.typeFun = function(data){
                    if(data == 1){
                        $scope.myurl = "/api/InfoCollection/SelectStock";
                        $scope.viewType = "line"
                    }else if(data == 2){
                        $scope.myurl = "/api/Report/SelectVolumeTotal";
                        $scope.viewType = "line"
                    }
                    else{
                        $scope.myurl = "/api/InfoCollection/SelectVolume";
                        $scope.viewType = "line"
                    }
                    $scope.getData();
                };
                $scope.getData = function () {
                    $http.get($scope.myurl, { params: { begin: $scope.begin, end: $scope.end } }).then(
                            function(res) {
                                //hot.loadData(res.data.Data);
                                console.log(res.data);
                                $scope.resdata1 = angular.copy(res.data);
                                var resdata = [].concat(res.data);

                                resdata[0].push('<div id="main" style="width: 600px;height:400px;"></div>');
                                hotSettings.data=resdata;
                                var Xlength = res.data[0].length;
//                                var Ylength = res.data.length;
                                hotSettings.columns[Xlength-1] = {renderer: 'html'};

                                hotSettings.mergeCells=[{row:0, col:Xlength-1, rowspan:17, colspan:1}];
                                hot = new Handsontable(hotElement, hotSettings);

                                dataToChange('main' , $scope.viewType, $scope.resdata1);
                                console.log("-----------");
                                console.log($scope.resdata1)
                                //   tabMager(hot, 1, 1, 2, 3);
                            }
                    );
                };

                $scope.typeFun(1);
            });

    function tabMager(hot, row, col, rowspan, colspan) {

        if(hot.mergeCells.mergedCellInfoCollection.length > 0) {
            for(var k=0; k<hot.mergeCells.mergedCellInfoCollection.length; k++) {
                if(hot.mergeCells.mergedCellInfoCollection[k].row == row &&
                        hot.mergeCells.mergedCellInfoCollection[k].col == col) {
                    hot.mergeCells.mergedCellInfoCollection.splice(k,1);
                    return;
                }else{
                    hot.mergeCells.mergedCellInfoCollection.push({"row": row, "col": col,
                        "rowspan": rowspan, "colspan": colspan});
                    break;
                }
            }
        } else {
            hot.mergeCells.mergedCellInfoCollection.push({"row": row, "col": col, "rowspan": rowspan, "colspan": colspan});
        }
    }
</script>
